<template>
  <a-card>
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-row>
        <a-col :span="itemSpan">
          <a-form-item label="问题标题">
            <a-input placeholder="请输入问题标题" v-decorator="['title']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan">
         <a-form-item label="问题跳转方式">
            <a-select style="width:170px" v-decorator="['jumpWay',]" placeholder="全部">
              <a-select-option value="ANSWER" >
                问题详情页
              </a-select-option>
              <a-select-option value="KEFU">
                人工客服
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan*2" >
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" @click="resetForm" class="ml-10">重置</a-button>
            <a-button type="primary" class="ml-10" @click="add(null)">新增</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      style="margin-top:20px"
      bordered
      :columns="columns"
      :rowKey="record => record.id"
      :data-source="dataSource"
      :pagination="pagination"
      :scroll="{ x: true }"
      @change="handleTableChange"
    >
       <span slot="navtype" slot-scope="text, record">{{ record.jumpWay == 'ANSWER'?'问题详情页':'人工客服' }}</span>
      <!--<span slot="status" slot-scope="text, record">{{ record.onlineState == 'Y' ? '启用' : '禁用' }}</span> -->
      <span slot="action" slot-scope="text, record">
        <!-- <a-icon type="arrow-up" class="sort"/>
        <a-icon type="arrow-down" class="sort ml-10"/> -->
        <a @click="add(record)" class="ml-10">编辑</a>
        <a @click="deleteService(record,3,'确认删除该问题吗？','删除后，使用该问题的小程序将不再展示该问题')" class="ml-10">删除</a>
      </span>
    </a-table>
    <a-modal v-model="visible" width="60%" :title="showTitle+'通用问题'" :footer="null">
      <create @close="close" :info="info" />
    </a-modal>
  </a-card>
</template>
<script>
import create from './form'
import { brands } from '../../util/brand'
import { listMixin } from '../../util/listMixin'
const columns = [
  {
    title: '问题标题',
    dataIndex: 'question',
    width:200,
    align:'center'
    // key: 'name'
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
   {
    title: '问题跳转方式',
    align:'center',
    width:200,
    // dataIndex: 'brand',
    // key: 'name',
    // slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'navtype' },
  },
  {
    title: '问题答案',
    dataIndex: 'answer',
    align:'center'
    // key: 'name'
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
  {
    title: '创建时间',
    width:200,
    key: 'createTime',
    dataIndex: 'createTime',
    align:'center',
  },
  {
    title: '更新时间',
    key: 'updateTime',
     width: 200,
    dataIndex: 'updateTime'
  },
  {
    title: '操作',
    width:200,
    key: 'action',
    align:'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'category',
  mixins:[listMixin],
  components:{create},
  data() {
    return {
      itemSpan: 6,
      brands,
      visible: false,
      columns,
      info:null,
      url: {
        list: '/jic-backend-aftersale/aftersale/kefu/tiku/list',
        delete: '/jic-backend-wechat/wechat-client/template/link'
      },
      showTitle:'新增'
    }
  },
  methods: {
    submit(e) {},
    add(record) {
      this.visible = true
      this.info = record
      if(record == null){
        this.showTitle = '新增'
      }else{
        this.showTitle = '编辑'
      }

    },
    close() {
      this.loadData()
      this.visible = false
      this.info = null
    },
  }
}
</script>
<style scoped>
.ml-10{
    margin-left: 10px;
}
.sort{
  color: #1890FF;
  /* margin-left: 10px; */
}
</style>
